<template>
  <h2 class="title2">基本信息 </h2>
  <Row type="flex" justify="space-between">
    <Col flex="820px">
      <table class="show-table">
        <colgroup>
          <col width="136">
          <col width="275">
          <col width="136">
          <col width="275">
        </colgroup>
        <tr>
          <td class="key">项目类别</td>
          <td>{{detail?.projectType}}</td>
          <td class="key">项目区划</td>
          <td>{{detail?.projectRegion}}</td>
        </tr>
        <tr>
          <td class="key">详细地址</td>
          <td>{{detail?.projectAddr}}</td>
          <td class="key">立项赋码</td>
          <td>{{detail?.assignCode}}</td>
        </tr>
        <tr>
          <td class="key">建设单位</td>
          <td>{{detail?.constrUnitName}}</td>
          <td class="key">建设单位统一社会信用代码</td>
          <td>{{detail?.constrUnitCode}}</td>
        </tr>
        <tr>
          <td class="key">资金性质</td>
          <td>{{detail?.capitalNature=="1"?'国有资金':'非国有资金'}}</td>
          <td class="key">总投资（万元)</td>
          <td>{{detail?.planAssets}}</td>
        </tr>
        <tr>
          <td class="key">工程用途</td>
          <td>{{detail?.projectUsage}}</td>
          <td class="key">建设性质</td>
          <td>{{detail?.projectNature}}</td>
        </tr>
        <tr>
          <td class="key">计划开工日期</td>
          <td>{{ parseTime(detail?.planStartDate)}}</td>
          <td class="key">计划竣工日期</td>
          <td>{{ parseTime(detail?.planEndDate)}}</td>
        </tr>
      </table>
    </Col>
    <Col flex="330px">
      <div class="flex h-100p">
        <div id="map" v-if="detail.longLatitude && detail.longLatitude!=='0,0'" class="map"></div>
        <div class="map noData" v-else></div>
        <p>项目地址：{{detail?.projectAddr}}</p>
      </div>
    </Col>

  </Row>
</template>

<script lang="ts">
import {defineComponent, toRefs, watch} from 'vue';
import {Row, Col} from 'ant-design-vue';
import AMapLoader from '@amap/amap-jsapi-loader';
import { detailProps } from "/@/api/pro";
import { parseTime } from '/@/utils';

export default defineComponent({
  components: {  Row , Col },
  props : detailProps,
  setup(props) {
    const { detail } = toRefs(props);
    watch(detail, (cur)=> {
      let longLatitude:any = cur.longLatitude;
      if(longLatitude){
        const position = longLatitude.split(',').map(Number);
        AMapLoader.load({
          key: "38b3eb45ad036a8f2351115465fd35a8",
          version: "1.4.15",
          plugins: [],
          AMapUI: {
            version: '1.1',
            plugins:[],
          }
        }).then( AMap => {
          let map = new AMap.Map('map', {
            zoom:11,
            center: position
          });
          let infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
          let marker = new AMap.Marker({
            icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png",
            position: position
          });
          marker.content = '这里是建设单位地址';
          marker.on('click', function(e){
            infoWindow.setContent(e.target.content);
            infoWindow.open(map, e.target.getPosition());
          });
          map.add(marker);
        }).catch(e => {
          console.log(e);
        })
      }

    })
    return {
      detail, parseTime
    }
  },
})
</script>

<style lang="less" scoped>
.title2{
  padding: 15px 0 5px;
}

.show-table{
  width: 100%;
  border: 1px solid #f0f0f0;

  tr{
    td{
      height: 50px;
      padding: 5px 15px;
      vertical-align: center;
      border: 1px solid #EAEAEA;

      &.key{
        background: #F3F3F3;
      }

    }
  }
}

.flex{
  flex-wrap: wrap;

  .map{
    width: 100%;
    height: 280px;
  }

  p{
    width: 100%;
    margin: 5px 0 0 0;
    color: #000;
  }
}

.noData{
  background: #fcfcfc url('/src/assets/img/nodata.png') no-repeat center;
  border: 1px solid #EAEAEA;
}
</style>
